<%-- 
    Document   : view
    Created on : 2015-5-2, 16:14:17
    Author     : hayate
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%

    String picpath = request.getContextPath() + "/pictures/";
    //String picpath = "http://localhost/pictures/";
%>

<div class="layout-a">
    <div class="layout-column-2">
        <div class="_unit _work-detail-unit">
            <div class="column-header">
                <nav>
                    <nav>
                        <ul class="tabs">
                            <li>
                                <a class="tab-profile" 
                                   href="${pageContext.request.contextPath}/users/${dressing.user.id}/show">个人资料</a></li><li>
                                <a class="tab-works current" href="#">作品</a>
                            </li>
                        </ul></nav>
                </nav>
            </div>

            <nav class="column-menu">
                <ul class="sibling-items with-thumbnail">
                </ul></nav>

            <section class="work-info ui-expander-container">
                <div class="ui-expander-target">
                    <div class="user-reaction">    
                        <section class="score"><dl><dt>浏览量</dt>
                                <dd class="view-count">29554</dd><dt>评分次数</dt><dd class="rated-count">1227</dd>
                                <dt>总分</dt>
                                <dd class="score-count">12198</dd></dl>
                            <div class="rating"><div class="rate"></div>
                                <div class="star"></div>
                                <div class="status"></div></div></section></div>
                    <ul class="meta">
                        <li>2015年5月6日 00:00</li>
                    </ul>
                    <h1 class="title">
                        ${dressing.title}</h1>
                    <p class="caption">
                        ${dressing.caption}</p>

                </div>
            </section>
            <div align="center"></div>

            <div align="center">

            </div><div style="height:10px"></div>

            <style>
                #illust-recommend .image-item {
                    height: auto;
                    width: auto;
                    margin: 0;
                    margin-bottom:15px;
                }
                #illust-recommend ._image-items {
                    margin: 2px 0;
                    text-align: center;
                }
                #illust-recommend {
                    float: right;width: 180px;margin-right: -182px;margin-top: 0px;border-radius: 0 5px 5px 0;}
                #illust-recommend h1 {
                    font-size: 12px;
                    font-weight: bold;
                    margin: 10px;
                }
            </style>

            <div class="works_display"><div class="_layout-thumbnail ui-modal-trigger">
                    <img alt="${dressing.title}" src="<%=picpath%>${dressing.pictureName}"></div>
            </div><div id="one_comment" class="response-container">
                <div class="layout-column-1">
                    <div class="_comment-item _comment-form-container">
                        <div class="user-icon-container">
                            <img width="50" class="user-icon" src="http://source.pixiv.net/common/images/no_profile_s.png"></div>

                        <div class="comment header">
                            <form class="_comment-form ui-tab-container root" method="post" action="${pageContext.request.contextPath}/dressings/${dressing.id}/opinions">
                                
                                <ul class="tabs ui-tabs" style="margin-bottom: 0;">
                                    <li  class="ui-tab tab-comment default _current">评论</li>
                                </ul>

                                <div class="ui-tab-content tab-content-comment" style="display: block;">
                                    <textarea maxlength="140" placeholder="发表评论..." name="content"></textarea>
                                    <div class="submit-container"><input type="submit" value="发送" class="submit-button"></div>

                                </div>

                            </form>

                        </div>
                    </div>

                    <div class="_comment-items">
                        <c:forEach var="opinion" items="${dressing.opinions}">
                        <div  class="_comment-item has-action-list">
                            <div  class="user-icon-container small ui-profile-popup" href="#">
                                <div class="user-icon ui-scroll-view"                                     
                                     style="opacity: 1; width: 40px; height: 40px;font-size: 16px;text-align: center;">
                                    <span id="" style="display: block;">${fn:length(opinion.votes)}</span>
                            <a class="vote" 
                               href="${pageContext.request.contextPath}/opinions/${opinion.id}/votes" 
                                       style="color: red;">
                                        <span class="glyphicon glyphicon-heart-empty" aria-hidden="true" 
                                   style="display: block;"></span></a>    
                                </div>
                        <script>
                          $(".vote").click(function() {
                              var anchor = $(this);
                              var addr = $(anchor).attr('href');
                              $.post(addr,
                              {},
                              function(data, status) {
                                  if("success" == data) {
                                    var vote = $(anchor).prev();
                                    var votes = vote.text();
                                    var newVotes = parseInt(votes) + 1;
                                    vote.text( newVotes);
                                  }
                              });
                              return false;
                          });                               
                        </script>
                            </div>
                            <div class="comment">
                                <div class="meta">
                                    <a class="user-name ui-profile-popup" 
                                    href="${pageContext.request.contextPath}/users/${opinion.user.id}/id">${opinion.user.name}</a>
                                    <span class="date _clickable"><%--2015年5月8日 13:23--%></span>
                                </div>
                                <div class="body"><p>${opinion.content}</p></div>
                                <hr>
                            </div>
                        </div>
                        </c:forEach>
                    </div>

                </div>

            </div>
        </div>

        <dl class="_shortcut-help _work-shortcut-help _inline-list slash-separated"><dt>
            <kbd>←</kbd></dt><dd>上一面</dd><dt><kbd>→</kbd></dt><dd>下一面</dd>
            <dt><kbd>L</kbd></dt><dd>评价（10分）</dd><dt><kbd>B</kbd></dt><dd>收藏</dd><dt><kbd>C</kbd></dt>
            <dd>评论</dd><dt><kbd>F</kbd></dt><dd>关注</dd></dl>
    </div>

    <div class="layout-column-1">
        <div class="ui-layout-west">

            <div class="_unit profile-unit">
                <a class="user-link" href="${pageContext.request.contextPath}/users/${dressing.user.id}/show">
                    <img class="user-image" alt="" src="<%=picpath%>avatar.jpg">
                    <h1 class="user">${dressing.user.name}</h1>
                </a>
            </div>

        </div>
    </div>
</div>